<template>
  <div class="photograph">
    <div class="Tips">
      拍摄一张现场照片
      <img src="../../assets/img/back.png"
           style="width:30px;height:30px;margin:10px 0 0 10px"
           @click="closed">
    </div>
    <!-- 上传图片 -->
    <div class="camera-photo"
         ref="divGenres"
         v-show="isPhoto"
         @click="choiceImg">
      <img style="width:100px;height:100px;"
           src="https://z3.ax1x.com/2021/11/26/oVUkfH.png" />
      <br>
      <!-- <span>请选择图片上传</span> -->
      <button class="btn"><span>拍照</span> </button>
      <input type="file"
             ref="uploadImage"
             @change="onFileChange"
             accept="image/*"
             capture="camera"
             style="display: none;">
    </div>
    <!-- 上传保存的图片 -->
    <div class="list-li"
         v-show="show">
      <div style="display: inline-block;">
        <a class="list-link"
           @click='previewImage(imgsrc)'>
          <img :src="imgsrc">
        </a>
        <span class="list-img-close"
              @click='delImage'></span>
      </div>
      <div class="add-preview"
           v-show="isPreview"
           @click="closePreview">
        <img :src="previewImg">
      </div>
      <button type="button"
              class="upload-button"
              @click="upload">图片上传</button>
    </div>
  </div>
</template>

<script>
// import Bus from '../bus.js'
// import qs from 'qs'
export default {
  data() {
    return {
      imgsrc: '', //上传的·图片的地址
      show: false, //图片放大预览
      previewImg: '', //预览图片的地址
      isPreview: false, //是否预览当前图片
      isPhoto: true,
      uploadFile: null
    }
  },
  methods: {
    choiceImg() {
      let self = this
      if (!window.plus) {
        self.addPic() //如果不支持plus,就用本地相册上传即可
        return
      }

      let title = '选择照片'
      let btns = ['拍照', '相册']

      var func = function(e) {
        var index = e.index

        if (index == 1) self.choiceCamera()
        if (index == 2) self.choicePic()
      }

      if (title && btns && btns.length > 0) {
        var btnArray = []
        for (var i = 0; i < btns.length; i++) {
          btnArray.push({ title: btns[i] })
        }

        plus.nativeUI.actionSheet(
          {
            title: title,
            cancel: '取消',
            buttons: btnArray
          },
          function(e) {
            if (func) func(e)
          }
        )
      }
    },

    choiceCamera() {
      let self = this
      var cmr = plus.camera.getCamera()
      cmr.captureImage(
        function(path) {
          plus.io.resolveLocalFileSystemURL(
            path,
            function(entry) {
              self.imgsrc = entry.toLocalURL()
              self.show = true
            },
            function(e) {
              plus.nativeUI.toast('读取拍照文件错误：' + e.message)
            }
          )
        },
        function(e) {},
        { index: 1, filename: '_doc/camera/' }
      )
    },

    choicePic() {
      let self = this
      plus.gallery.pick(
        function(p) {
          plus.io.resolveLocalFileSystemURL(
            p,
            function(entry) {
              self.imgsrc = entry.toLocalURL()
              self.show = true
            },
            function(e) {
              plus.nativeUI.toast('读取拍照文件错误：' + e.message)
            }
          )
        },
        function(e) {
          plus.nativeUI.toast('读取拍照文件错误：' + e.message)
        },
        {
          filename: '_doc/camera/',
          filter: 'image'
        }
      )
    },

    upload() {
      var self = this
      var wt
      if (window.plus) wt = plus.nativeUI.showWaiting()

      var img = new Image(),
        width = 512, //image resize   压缩后的宽
        quality = 0.5, //image quality  压缩质量
        canvas = document.createElement('canvas'),
        drawer = canvas.getContext('2d')
      img.src = self.imgsrc
      img.onload = function() {
        //利用canvas压缩图片
        canvas.width = width
        canvas.height = width * (img.height / img.width)
        drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
        var base64 = canvas.toDataURL('image/*', quality)
        var pic = base64.split(',')[1] //图片的base64编码内容
        var f = self.imgsrc
        var filename = f.replace(f.substring(0, f.lastIndexOf('/') + 1), '') //图片名称

        if (self.uploadFile !== null) {
          //addPic方法得到的图片文件
          filename = self.uploadFile.name
          let reader = new FileReader()
          reader.readAsDataURL(self.uploadFile)
          reader.onload = function(e) {
            img.src = e.target.result
          }
          img.onload = function() {
            canvas.width = width
            canvas.height = width * (img.height / img.width)
            drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
            base64 = canvas.toDataURL('image/*', quality)
            pic = base64.split(',')[1]
          }
        } //此处是将图片上传到服务器的代码，略过
      }
      // 跳转计时页面
      this.$router.push('/information')
    },

    onFileChange(e) {
      let self = this
      let files = e.target.files || e.dataTransfer.files
      if (!files.length) return
      let file = files[0] //File对象
      self.uploadFile = file
      let reader = new FileReader() //FileReader对象
      reader.readAsDataURL(file) //该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成（DONE），并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。

      reader.onload = function(e) {
        self.imgsrc = e.target.result //图片内容的base64编码
        self.show = true
      }
    },

    addPic: function(e) {
      let els = this.$refs.divGenres.querySelectorAll('input[type=file]')
      els[0].click()
      return false
    },

    // 返回上一级
    closed() {
      this.$router.go(-1)
    },

    delImage: function() {
      this.imgsrc = ''
      this.show = false
      this.isPreview = false
    },

    previewImage: function(url) {
      let vm = this
      vm.isPreview = true
      vm.previewImg = url
      // console.log(url)
    },

    closePreview: function() {
      let vm = this
      vm.isPreview = false
      vm.previewImg = ''
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>